import './index.scss'
import React, { useState } from 'react'
import { Form, Input, Button } from 'antd';
const src = require('./img/bg.jpg')

function LoginFrom({onLogin}) {
    const onFinish = (obj) => { onLogin(obj)}
    return <Form
        name="basic"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
    >
        <Form.Item
            label="用户名"
            name="account"
            rules={[{ required: true, message: 'Please input your name!' }]}
        >
            <Input />
        </Form.Item>
        <Form.Item
            label="密码"
            name="pwd"
            rules={[{ required: true, message: 'Please input your password!' }]}
        >
            <Input.Password />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
            <Button type="primary" htmlType="submit">
                登录
            </Button>
        </Form.Item>
    </Form>
}

export default function LoginStyle(props) {
    const [isRight, setRight] = useState(false)
    const { onLogin, onSignIn } = props
    return (
        <div className="loginstyle-container" style={{ backgroundImage: `url(${src})` }}>
            <div className="content">
                <div className={`overlay_content ${isRight ? 'right' : ''}`}>
                    <div className="overlay" style={{ backgroundImage: `url(${src})` }}>
                        <div className="kuai left">
                            <button className="btn" onClick={() => setRight(false)}>去注册</button>
                        </div>
                        <div className="kuai right">
                            <button className="btn" onClick={() => setRight(true)}>去登录</button>
                        </div>
                    </div>
                </div>
                <div className="form_content">
                    <div className="kuai">
                        {/*注册 onSignIn */}
                        <button className="btn" onClick={() => onSignIn()}>注册</button>
                    </div>
                    <div className="kuai">
                        {/*登录  onLogin*/}
                        <div>
                            <LoginFrom onLogin={onLogin} />
                            {/* <button className="btn" onClick={() => onLogin()}>登录</button> */}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

LoginStyle.defaultProps = {
    onLogin() { },
    onSignIn() { }
}

// 展示样式
export const size = { width: '100%', height: 500 }


export const name = 'Login1'